import React, { Component } from 'react';
import { Platform, Dimensions, StyleSheet, View, Text, Image, TouchableNativeFeedback, TouchableOpacity } from 'react-native';

export default class ImgButton extends Component {
    render() {
        let { height, width } = Dimensions.get('window')
        let styles = StyleSheet.create({
            button: {
                width: (width / 5),
                height: (width / 5 + 30),
                justifyContent: 'center',
                flexDirection: 'column',
                alignItems: 'center'
            },
            buttonimg: {
                width: (width / 5),
                height: (width / 5)
            },
            buttontext: {
                lineHeight: 25,
                fontSize: 18
            }
        })
        if (Platform.OS === 'android') {
            return (
                <TouchableNativeFeedback onPress={this.props.onButtonPass.bind(this, this.props.index)}>
                    <View style={styles.button}>
                        <Image style={styles.buttonimg} source={this.props.img}></Image>
                        <Text style={styles.buttontext}>{this.props.text}</Text>
                    </View>
                </TouchableNativeFeedback>
            )
        } else {
            return (
                <TouchableOpacity onPress={this.props.onButtonPass.bind(this, this.props.index)}>
                    <View style={styles.button}>
                        <Image style={styles.buttonimg} source={this.props.img}></Image>
                        <Text style={styles.buttontext}>{this.props.text}</Text>
                    </View>
                </TouchableOpacity>
            )
        }
    }
}

